<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>北大青鸟官网注册</title>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				$("#email").blur(function(){
					let em=$(this).val();
					console.log(em);
					var regemail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/gi;
					if(regemail.test(em)){
						$(this).next().text("√").css("color","green");
						return true; 
					}
					$(this).next().text("电子邮件格式不合法").css("color","red");
					return false;
				});
				$("#nickname").blur(function (){
					let em = $(this).val();
					console.log(em);
					let rename = /^\w{4,12}/;
					if (em == '') {
						$(this).next().show().html('用户名不能为空').css("color","red");
						return false
					}
					if (rename.test(em)) {
						$(this).next().text("√").css("color","green");
						return  true
					} else {
						$(this).next().show().html('用户名是4-12位字符，数字、字母和中文').css("color","red");
						return false
					}
				});
				$("#password").blur(function (){
					// 获取密码框输入的数据
					let vals =$(this).val()
					// 密码正则匹配表达式
					var rePass = /^[\w!-@#$%^&*]{6,20}$/
					// 如果输入框为空，则提示不能为空并return
					if (vals==''){
						$(this).next().show().html('密码不能为空').css("color","red");
						return false
					}
					// 正则验证密码输入是否合法
					if(rePass.test(vals))
					{
						$(this).next().text("√").css("color","green");
						return  true
					}
					else
					{
						// 如果匹配失败，则显示span标签，替换提示信息
						$(this).next().show().html('密码是6到20位字母、数字，还可包含@!#$%^&*-字符').css("color","red");
						 return  false
					}
				});
				$("#password2").blur(function (){
					// 获取重复密码框输入的数据
					var vals=$("#password").val()
					var cvals=$(this).val()
					if(cvals==''){
						$(this).next().show().html('重复密码框不能为空').css("color","red");
						return false
					}
					if (vals==cvals){
						$(this).next().text("√").css("color","green");
						 return true
					}
					else{
						$(this).next().show().html('两次密码输入不一致，请重新输入').css("color","red");
						return false
					}

				});


			});
		</script>
	</head>
	<body>
		<form id="reg-form" action="/reg-email.html" method="post">

			<p class="tab-on"><a href="/reg-email">邮箱注册</a></p>

			<div class="reg-rela left">
				<input type="email" name="email" placeholder="请输入您的常用邮箱" param="请输入您的常用邮箱" class="reg-input" required
					id="email" />
				<span class="reg-prev prev-mail"></span>
			</div>

			</li>
			<li>
				<div class="reg-rela left">
					<input type="text" name="nickname" placeholder="请输入昵称" param="请输入昵称" class="reg-input" required
						id="nickname" />
					<span class="reg-prev prev-tel"></span>
				</div>
			</li>
			<li>
				<div class="reg-rela left">
					<input type="password" name="password" class="reg-input" id="password" />
					<label class="psw-tip">请输入密码</label>
					<span class="reg-prev prev-tel"></span>
				</div>

			</li>
			<li>
				<div class="reg-rela left">
					<input type="password" name="password2" class="reg-input" id="password2" />
					<label class="psw-tip">请再次输入密码</label>
					<span class="reg-prev prev-tel"></span>
				</div>

			</li>

			<li class="agree-li">
				<div class="agree-li-l left">
					<input type="checkbox" required class="agreeCheck" id="agree" checked />
					<label>同意<a href="javascript:void(0);" id="agreeListens">用户服务条款</a></label>
				</div>
			</li>
			<li class="submit-li">
				<input type="submit" class="reg-btn" value="注册" id="regs" />
			</li>
			</ul>
		</form>
	</body>
</html>
